<template>
  <el-row class="app-container">
    <!-- 财物列表 -->
    <FormData
      ref="reference"
      :pageNum="pageNum"
      :pageSize="pageSize"
      buttonName="登记"
      @handleQuery="getList"
      @registerDispose="registerDispose"
    />

    <el-table
      :row-class-name="tableRowClassName"
      stripe
      v-loading="loading"
      :data="disposalList"
      @selection-change="handleSelectionChange"
    >
      <el-table type="selection" width="55" align="center" />
      <el-table-column label="序号" align="center" prop="index">
        <template slot-scope="scope">
          {{ scope.row.index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="物品名称" align="center" prop="pName">
        <template slot-scope="scope">
          {{ scope.row.pName ? scope.row.pName : scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="物品类型" align="center" prop="type">
        <template slot-scope="scope">
          {{ propertyTypeReplace(scope.row.type) }}
        </template>
      </el-table-column>
      <el-table-column label="数量" align="center" prop="count" />
      <el-table-column label="入库照片" align="center" prop="storeImg" width="100">
        <template slot-scope="scope">
          <image-preview
            :src="scope.row.storeImg ? scope.row.storeImg : ''"
            :width="50"
            :height="50"
          />
        </template>
      </el-table-column>
      <el-table-column label="出库照片" align="center" prop="deliverImg" width="100">
        <template slot-scope="scope">
          <image-preview
            :src="scope.row.deliverImg ? scope.row.deliverImg : ''"
            :width="50"
            :height="50"
          />
        </template>
      </el-table-column>
      <el-table-column label="办案人员" align="center" prop="phName" />
      <el-table-column label="登记时间" align="center" prop="registryTime" width="180">
        <template slot-scope="scope">
          <span>{{
            parseTime(
              scope.row.registryTime ? scope.row.registryTime : scope.row.createTime,
              '{y}-{m}-{d}'
            )
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="updateList(scope.row.index, false)"
            >修改</el-button
          >
          <el-button size="mini" type="text" @click="deleteDisposalList(scope.row)">删除</el-button>
          <el-button size="mini" type="text" @click="updateList(scope.row.index, true)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <div class="bottom">
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="pageNum"
        :limit.sync="pageSize"
        @pagination="paging"
      />
    </div>

    <el-dialog
      v-bind="$attrs"
      :visible.sync="dialog"
      v-on="$listeners"
      @close="onClose"
      :title="disabled ? '详情' : '修改'"
    >
      <el-form
        ref="elForm"
        clearable
        :model="updateFormData"
        :disabled="disabled"
        :rules="rules"
        size="medium"
        label-width="100px"
        label-position="left"
      >
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="物品名称" prop="pName">
              <el-input
                v-model="updateFormData.pName"
                placeholder="请输入物品名称"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="物品类型" prop="type">
              <el-select
                v-model="updateFormData.type"
                placeholder="请选择物品类型"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in pTypeOptions"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="数量" prop="count">
              <el-input
                v-model="updateFormData.count"
                placeholder="请输入数量"
                clearable
                :style="{ width: '100%' }"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="登记时间" prop="registryTime">
              <el-date-picker
                clearable
                v-model="updateFormData.registryTime"
                type="date"
                :style="{ width: '100%' }"
                value-format="yyyy-MM-dd"
                placeholder="开始时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="12">
            <el-form-item label="入库图片" prop="storeImg" required>
              <image-upload v-model="updateFormData.storeImg" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="出库图片" prop="deliverImg" required>
              <image-upload v-model="updateFormData.deliverImg" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>
  </el-row>
</template>

<script>
import FormData from '@/components/FormData'
import {
  getPropertyInfo,
  updatePropertyInfo,
  deletePropertyInfo
} from '@/api/property/propertyList.js'
import { propertyTypeReplace } from '@/utils/characterConversion.js'

export default {
  naem: 'propertyList',
  components: { FormData },
  data() {
    return {
      // 修改弹框是否显示
      dialog: false,
      disabled: false,
      disposalList: [],
      updateFormData: {
        // pId: null,
        pName: null,
        type: 1,
        count: null,
        phName: null,
        storeImg: null,
        deliverImg: null,
        registryTime: null
      },
      rules: {
        registryTime: [
          {
            required: true,
            message: '请选择日期选择',
            trigger: 'change'
          }
        ],
        pName: [
          {
            required: true,
            message: '请输入物品名称'
          }
        ],
        type: [
          {
            required: true,
            message: '请选择物品类型',
            trigger: 'change'
          }
        ],
        count: [
          {
            required: true,
            message: '请输入数量'
          }
        ],
        peName: [
          {
            required: true,
            message: '请输入办案人员'
          }
        ]
      },
      pTypeOptions: [
        {
          label: '普通物品',
          value: '1'
        },
        {
          label: '特殊物品',
          value: '2'
        },
        {
          label: '车辆',
          value: '3'
        }
      ],
      // 遮罩层
      loading: true,
      // 数据总条数
      total: 0,
      pageSize: 10,
      pageNum: 1
    }
  },
  mounted() {},
  methods: {
    // 删除列表
    deleteDisposalList(obj) {
      this.$confirm('确认要删除吗?')
        .then((_) => {
          deletePropertyInfo(obj).then((e) => {
            if (e.code === 200) {
              this.disposalList = this.disposalList.filter((e) => e.pId !== obj.pId)
            }
          })
        })
        .catch((_) => {})
    },
    // 把表格每一行的索引放进 row
    tableRowClassName({ row, rowIndex }) {
      row.index = rowIndex
    },
    // 点击修改列表按钮
    updateList(index, disabled) {
      this.dialog = true
      this.disabled = disabled
      for (const key in this.disposalList[index]) {
        this.updateFormData[key] = this.disposalList[index][key]
      }
    },
    // 关闭修改弹出框
    onClose() {
      this.$refs['elForm'].resetFields()
    },
    close() {
      // this.$emit('update:visible', false)
      this.dialog = false
    },
    // 确认修改列表
    handleConfirm() {
      if (this.disabled) return this.close()
      this.$refs['elForm'].validate((valid) => {
        if (!valid) return
        updatePropertyInfo(this.updateFormData).then((res) => {
          this.getPropertyList()
          this.close()
        })
      })
    },
    // 替换物品类型字段
    propertyTypeReplace,
    // 请求财物信息列表
    getPropertyList(e) {
      this.loading = true
      getPropertyInfo({ ...e, rId: this.$route.query.id }).then((res) => {
        this.total = res.total
        this.disposalList = res.rows
        this.loading = false
      })
    },
    // 点击登记处置跳转到财物登记
    registerDispose() {
      this.$router.push('/property/registry')
    },
    /** 查询财物处置列表 */
    getList(e) {
      this.getPropertyList(e)
    },
    // 分页
    paging(e) {
      this.pageNum = e.page
      this.pageSize = e.limit
      this.$nextTick(() => {
        this.$refs.reference.handleQuery()
      })
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.orderId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    }
  }
}
</script>

<style lang="scss" scoped></style>
